<template>
    <div class="hero-update-container">
        <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="贴图">
                <ossUpload :imageUrl="detailData.src" dirName="Activity" :imgName="randomName" @upload-img="handler">
                </ossUpload>
            </el-form-item>
            <el-form-item label="类别">
                <el-select v-model="detailData.type" placeholder="请选择类别">
                    <el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="名称">
                <el-input v-model="detailData.name" placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item label="血量">
                <el-input v-model="detailData.hp" placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item label="分类">
                <el-select v-model="detailData.category" placeholder="请选择类别">
                    <el-option v-for="item in sortType" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="伤害">
                <el-input v-model="detailData.damage" placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item label="特殊能力">
                <el-input type="textarea" :rows="3" v-model="ability" placeholder="多项用中文逗号分隔"></el-input>
            </el-form-item>
            <mavon-editor v-model="detailData.content" @save="update" @imgAdd="imgUpload" class="editor-sty"
                :boxShadow="false" ref="md"></mavon-editor>
        </el-form>
    </div>
</template>

<script>
    import OSS from 'ali-oss'
    import ossUpload from '@/components/ossUpload.vue';
    import md5 from 'md5-js'
    export default {
        name: "AniUpdate",
        data() {
            return {
                detailData: {
                    src: "",
                    content: "",
                    type: "",
                    category: "0",
                    ability: [],
                },
                ability: "",
                types: [
                    {
                        value: 'FORGEANI',
                        label: '熔炉生物'
                    }
                ],
                sortType: [{
                    label: "敌对生物",
                    value: "0"
                }, {
                    label: "同盟生物",
                    value: "1"
                }],
            }
        },
        components: {
            ossUpload
        },
        watch: {
            ability(newValue) {
                this.detailData.ability = newValue.split("，");
            }
        },
        created() {
            let id = this.$route.query.id;
            if (id) {
                this.getDetailData(id);
            }
        },
        computed: {
            randomName() {
                let time = new Date();
                return md5(time);
            }
        },
        methods: {
            handler(src) {
                this.detailData.src = src;
            },
            /**
             * 获取详情
             * @param id
             */
            getDetailData(id) {
                this.axios.get('/activity/single', {
                    params: {
                        id
                    }
                })
                    .then(res => {
                        this.detailData = res.data;
                        this.ability = this.detailData.ability.join("，");
                    })
            },
            /**
             * 修改
             */
            update() {
                let addOrUpdate = this.$route.query.id ? "update" : "add";
                this.axios.post(`/activity/ani/${addOrUpdate}`, this.detailData)
                    .then(res => {
                        if (res.data.code !== 0) {
                            this.$message.error(res.data.message);
                        } else {
                            this.$router.push('/AniList');
                        }
                    })
            },
            imgUpload(filename, $file) {
                // oss配置
                const client = new OSS({
                    endpoint: 'oss-cn-beijing.aliyuncs.com',
                    accessKeyId: "LTAI4FgrsFXo8ij335BxeRbp",
                    accessKeySecret: "oG0PWkV0qOeDoJQfwEHOqIvTp16S0x",
                    bucket: 'stavebox',
                });
                // 图片路径拼接，dirName其实就是定义存在oss的哪个虚拟文件夹下的
                let time = new Date();
                let hash = md5(time);
                let imgType = $file.type.split('/')[1];
                let hashName = 'Activity/' + hash + '.' + imgType;
                // 将文件流上传至oss
                client.put(hashName, $file)
                    .then(res => {
                        let imgUrl = 'http://img.fireleaves.cn/' + res.name;
                        this.$refs.md.$img2Url(filename, imgUrl);
                    })
                    .catch((err) => {
                        console.log(err)
                    })
            }
        }
    }
</script>

<style lang="scss">
    .hero-update-container {
        .demo-table-expand {
            font-size: 0;
        }

        .demo-table-expand label {
            width: 90px;
            color: #99a9bf;
        }

        .demo-table-expand .el-form-item {
            margin-right: 0;
            margin-bottom: 16px;
            width: 50%;
        }

        .el-input__inner {
            width: 221px;
        }

        .composition-sty .el-input__inner {
            width: 160px;
        }

        .editor-sty {
            z-index: 1;
            height: 80vh;
        }
    }
</style>

<style lang="scss" scoped>
    .hero-update-container {
        padding: 16px;
    }
</style>